@import "../../../../style/color.scss";
@import "../../../../style/domain.scss";
@import "../../../../style/font.scss";
@import "../../../../style/mixin.scss";
.task-container{
  overflow: hidden;
  *zoom: 1;

    .side-menu{
      float:right;
      margin-left:19px;
      width: 402px;
      position: relative;

      .video-wrap {
        width: 100%;
        height: 250px;
        box-sizing: border-box;
        background: url("./../../../../../images/page/right_menu_bg.png") no-repeat;
        background-size: 402px 250px;
        margin-bottom: 20px;
        overflow: auto;
        scrollbar-face-color:$form-border-color;
        scrollbar-arrow-color: $form-border-color;
        scrollbar-shadow-color:$form-border-color;
        scrollbar-dark-shadow-color:$form-border-color;
        scrollbar-base-color: $form-border-color;
      }

      .top-menu {
        width: 100%;
        height: 173px;
        background: url("./../../../../../images/page/task_top_bg.png") no-repeat;
        background-size: 100% 100%;
        position: relative;

        .title {
          text-align: center;
          position: absolute;
          top: -12px;
          left: 0;
          right: 0;

          span {
            display: inline-block;
            width: 182px;
            height: 42px;
            background: url("./../../../../../images/page/task_title.png") no-repeat 100% 100%;
            font-family: $regular-font-family;
            font-size: 18px;
            color: #FFFFFF;
            text-shadow: 0 0 4px rgba(255,255,255,0.50);
            line-height: 42px;
          }

        }

        .duty-list {
          height: 100%;
          padding: 33px 12px 12px;

          >div {
            width: 100%;
            height: 100%;
            overflow: auto;
          }
        }

      }

      .bottom-menu {
        margin-top: 8px;
        position: relative;
        top: 10px;

        .menu-wrap {
          width: 100%;
          height: 327px;
          background: url("./../../../../../images/page/task_bottom_bg.png") no-repeat;
          background-size: 100% 100%;

          .title {
            text-align: center;
            position: absolute;
            top: -10px;
            left: 0;
            right: 0;

            span {
              display: inline-block;
              width: 182px;
              height: 42px;
              background: url("./../../../../../images/page/task_title.png") no-repeat 100% 100%;
              font-family: $regular-font-family;
              font-size: 18px;
              color: #FFFFFF;
              text-shadow: 0 0 4px rgba(255,255,255,0.50);
              line-height: 42px;
            }

          }

          .bottom-list {
            width: 100%;
            height: 220px;
            padding: 33px 12px 12px;

            >div {
              width: 100%;
              height: 100%;
              overflow: auto;
            }
          }
        }
      }


      .duty-item {
        width:100%;
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        padding-right: 20px;
        font-family: $regular-font-family;
        font-size: 14px;
        color: #FFFFFF;
        letter-spacing: 1px;
        text-shadow: 0 0 4px rgba(255,255,255,0.50);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        &:hover {
          cursor: pointer;
          background: #E0AD41;
          border-radius: 4px;
        }
      }
    }

  .menu-bottom{
    padding:14px 18px 10px;

    .btn {
      font-family: $regular-font-family;
      font-size: 16px;
      color: #FFFFFF;
      letter-spacing: 1px;
      text-shadow: 0 0 4px rgba(255,255,255,0.50);
      width: 172px;
      height: 36px;
      line-height: 36px;

      &:hover, &:active, &:focus {
        width: 172px;
        height: 36px;
        font-size: 16px;
        line-height: 36px;
      }

      &:first-child, &:nth-child(3){
        margin-right:20px;
      }

      &:first-child,&:nth-child(2){
        margin-bottom:10px;
      }

    }
  }

  .map-wrap {
    margin-right: 421px;
    height: 100%;

    .video {
      width: 100%;
      height: 787px;
      padding: 28px 32px;
      box-sizing: border-box;
      background:
        url("./../../../../../images/page/map_b_l1.png") no-repeat top left,
        url("./../../../../../images/page/map_b_r1.png") no-repeat top right;
      background-size: 263px 100%;
      position: relative;

      .vehicle-wrap {
        position: absolute;
        top:28px;
        right: 32px;
        bottom: 28px;
        left: 32px;
      }

      #business-video {
        width: 100%;
        height: 100%;
      }

      div {
        border:solid 1px $button-normal-background-color;
      }
    }

  }

  .tdt-container a.tdt-infowindow-close-button {
    color: #ffffff;
    height: 0;
    top: 12px;
    right: -146px;
  }

  .tdt-infowindow-content {
    margin: 0;
  }
  .tdt-infowindow-content-wrapper, .tdt-infowindow-tip {
    background-color: transparent;
    box-shadow:none;
  }

  .tdt-infowindow-tip-container {
    height: 0;
  }
}
.task-container:after{

  display:block;
  clear:both;
  content:"";
  visibility: hidden;
  height:0;
}

.task-wind {
  @include dashed-border();
  background-color: rgba(0,138,255,0.30);
  padding: 10px;
  width: 460px;
  .content {
    background-color: $info-window-bg;
    padding: 18px;

    .name {
      font-family: $regular-font-family;
      font-size: 20px;
      color: #FFFFFF;
      letter-spacing: 0;
  //    margin-bottom: 20px;
      width: 100%;
      overflow: hidden;
      white-space:nowrap;
      text-overflow: ellipsis;
    }

    #business {
      cursor: pointer;
    }
  }
}
